<template>
	<div>
		<sh-card title="基础用法" class="mb-3">
			<sh-poptip trigger="hover" title="Title" content="content">
				<vxe-button>Hover</vxe-button>
			</sh-poptip>
			<sh-poptip title="Title" content="content">
				<vxe-button>Click</vxe-button>
			</sh-poptip>
			<sh-poptip trigger="focus" title="Title" content="content">
				<vxe-button>Focus</vxe-button>
			</sh-poptip>
			<sh-poptip trigger="focus" title="Title" content="content">
				<vxe-input placeholder="Input focus" />
			</sh-poptip>
		</sh-card>
		<sh-card title="位置" class="mb-3">
			<div class="top">
				<sh-poptip title="Title" content="content" placement="top-start">
					<vxe-button>Top Left</vxe-button>
				</sh-poptip>
				<sh-poptip title="Title" content="content" placement="top">
					<vxe-button>Top Center</vxe-button>
				</sh-poptip>
				<sh-poptip title="Title" content="content" placement="top-end">
					<vxe-button>Top Right</vxe-button>
				</sh-poptip>
			</div>
			<div class="center">
				<div class="center-left">
					<sh-poptip title="Title" content="content" placement="left-start"> <vxe-button>Left Top</vxe-button> </sh-poptip><br /><br />
					<sh-poptip title="Title" content="content" placement="left"> <vxe-button>Left Center</vxe-button> </sh-poptip><br /><br />
					<sh-poptip title="Title" content="content" placement="left-end">
						<vxe-button>Left Bottom</vxe-button>
					</sh-poptip>
				</div>
				<div class="center-right">
					<sh-poptip title="Title" content="content" placement="right-start"> <vxe-button>Right Top</vxe-button> </sh-poptip><br /><br />
					<sh-poptip title="Title" content="content" placement="right"> <vxe-button>Right Center</vxe-button> </sh-poptip><br /><br />
					<sh-poptip title="Title" content="content" placement="right-end">
						<vxe-button>Right Bottom</vxe-button>
					</sh-poptip>
				</div>
			</div>
			<div class="bottom">
				<sh-poptip title="Title" content="content" placement="bottom-start">
					<vxe-button>Bottom Left</vxe-button>
				</sh-poptip>
				<sh-poptip title="Title" content="content" placement="bottom">
					<vxe-button>Bottom Center</vxe-button>
				</sh-poptip>
				<sh-poptip title="Title" content="content" placement="bottom-end">
					<vxe-button>Bottom Right</vxe-button>
				</sh-poptip>
			</div>
		</sh-card>
		<sh-card title="从浮层内关闭" class="mb-3">
			<sh-poptip v-model="visible">
				<a>Click</a>
				<template #title>
					<div><i>Custom title</i></div>
				</template>
				<template #content>
					<a @click="close">close</a>
				</template>
			</sh-poptip>
		</sh-card>
		<sh-card title="确认框" class="mb-3">
			<sh-poptip confirm title="Are you sure you want to delete this item?" @confirm="ok" @cancel="cancel">
				<vxe-button>Delete</vxe-button>
			</sh-poptip>
			<sh-poptip confirm title="Are you sure delete this task?" comfirm-text="yes" cancel-text="no" @confirm="ok" @cancel="cancel">
				<vxe-button>Internationalization</vxe-button>
			</sh-poptip>
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BasePoptip',
	data() {
		return {
			visible: false
		}
	},
	methods: {
		close() {
			this.visible = false
		},
		ok() {
			this.$Notice.info({
				title: 'You click ok'
			})
		},
		cancel() {
			this.$Notice.info({
				title: 'You click cancel'
			})
		}
	}
}
</script>

<style scoped lang="scss">
.top,
.bottom {
	text-align: center;
	width: 100%;
}
.center {
	width: 600px;
	margin: 10px auto;
	overflow: hidden;
}
.center-left {
	float: left;
}
.center-right {
	float: right;
}
</style>
